<template>
  <div class="transfer-container">
    <div class="transfer-panel">
      <div class="transfer-panel__head">{{ titles[0] }}</div>
      <el-scrollbar
        style="height:100%"
        wrap-style="overflow-x:hidden;"
      >
        <el-tree
          :ref="refLeft"
          :data="dist"
          :node-key="nodeKey"
          :props="defaultProps"
          :expand-on-click-node="expandOnClickNode"
          check-on-click-node
          show-checkbox
          highlight-current
          @node-click="handleNodeClick"
        />
      </el-scrollbar>
    </div>
    <div class="transfer-actions">
      <el-button @click="onAdd">加入</el-button>
      <el-button @click="onRemove">移除</el-button>
    </div>
    <div class="transfer-panel">
      <div class="transfer-panel__head">{{ titles[1] }}</div>
      <el-scrollbar
        style="height:100%"
        wrap-style="overflow-x:hidden;"
      >
        <el-tree
          :ref="refRight"
          :data="checks"
          :node-key="nodeKey"
          :props="defaultProps"
          :expand-on-click-node="expandOnClickNode"
          check-on-click-node
          show-checkbox
          highlight-current
        />
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { areas, areaTree } from '@/library'
import { explainTreeLeaf } from '@/utils'
export default {
  name: 'TransferTree',
  props: {
    titles: {
      type: Array,
      default: () => {
        return ['列表 1', '列表 2']
      }
    },
    source: {
      type: Array,
      default: () => {
        return areas
      }
    },
    value: {
      type: Array,
      default: () => {
        return ['130481', '130404', '130403', '130406']
      }
    },
    refLeft: {
      type: String,
      default: 'transferFrom'
    },
    refRight: {
      type: String,
      default: 'transferTo'
    },
    nodeKey: {
      type: String,
      default: 'id'
    },
    defaultProps: {
      type: Object,
      default: () => {
        return {
          children: 'children',
          label: 'name'
        }
      }
    },
    expandOnClickNode: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      treeClickCount: 0,
      dist: areaTree,
      checks: [],
      results: []
    }
  },
  computed: {
    checkNodeCodes: {
      get() {
        var data = this.value
        var codes = []
        if (data && data.length) {
          for (var i = 0; i < data.length; i++) {
            var code = data[i]
            var tempCodes = [code]
            tempCodes.push(code.substring(0, 4) + '00')
            tempCodes.push(code.substring(0, 2) + '0000')
            for (var ti = 0; ti < tempCodes.length; ti++) {
              var tempCode = tempCodes[ti]
              if (codes.indexOf(tempCode) === -1) {
                codes.push(tempCode)
              }
            }
          }
        }
        return codes
      },
      set(val) {
        this.$emit('input', [...val])
      }
    }
  },
  watch: {
    checks: {
      handler(v) {
        console.log('checks changed', v)
        this.onResult(v)
      },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.onMounteData(this.value)
    })
  },
  methods: {
    onMounteData(data) {
      if (!(data && data.length)) {
        return
      }
      var codes = this.checkNodeCodes
      var checkedNodes = this.source.filter(item => {
        return codes.indexOf(item.code) !== -1
      })
      var $toel = this.$refs[this.refRight]
      var $el = this.$refs[this.refLeft]
      checkedNodes.map(item => {
        var pnode = $toel.getNode(item.parent_id)
        var node = $toel.getNode(item.id)
        if (!node) {
          $toel.append(item, pnode)
        }
        var lnode = $el.getNode(item.id)
        if (lnode && !lnode.childNodes.length) {
          $el.remove(lnode)
        }
      })
    },
    filterCheckedNodes(data) {
      return data.map(item => {
        const { children, ...params } = item
        console.log('reset node remove', children)
        return params
      })
    },
    onResult(v) {
      this.checkNodeCodes = explainTreeLeaf(v)
    },
    onAdd() {
      var $el = this.$refs[this.refLeft]
      var checkeds = $el.getCheckedNodes(false, true)
      var removes = $el.getCheckedNodes()
      var parents = this.filterCheckedNodes(checkeds)
      var $toel = this.$refs[this.refRight]
      for (var i = 0; i < parents.length; i++) {
        var item = parents[i]
        var pnode = $toel.getNode(item.parent_id)
        var node = $toel.getNode(item.id)
        if (!node) {
          $toel.append(item, pnode)
        }
      }
      for (var j = 0; j < removes.length; j++) {
        $el.remove(removes[j])
      }
      $el.setCheckedKeys([])
      this.onResult(this.checks)
    },
    // 节点点击事件
    handleNodeClick(data, node) {
      // 记录点击次数
      this.treeClickCount++
      // 单次点击次数超过2次不作处理,直接返回,也可以拓展成多击事件
      if (this.treeClickCount >= 2) {
        return
      }
      var leftTree = this.$refs[this.refLeft]
      // 计时器,计算300毫秒为单位,可自行修改
      setTimeout(() => {
        if (this.treeClickCount === 1) {
          // 把次数归零
          this.treeClickCount = 0
          // 单击事件处理
          console.log('单击事件,可在此处理对应逻辑')
        } else if (this.treeClickCount > 1) {
          leftTree.store.nodesMap[node.id].expanded = true
          // 把次数归零
          this.treeClickCount = 0
          // 双击事件
          console.log('双击事件,可在此处理对应逻辑')
        }
      }, 300)
    },
    onRemove() {
      // var checks = this.checks
      var $el = this.$refs[this.refRight]
      var checkeds = $el.getCheckedNodes(false, true)
      var removes = $el.getCheckedNodes()
      var parents = this.filterCheckedNodes(checkeds)
      var $toel = this.$refs[this.refLeft]
      for (var i = 0; i < parents.length; i++) {
        var item = parents[i]
        var pnode = $toel.getNode(item.parent_id)
        var node = $toel.getNode(item.id)
        if (!node) {
          $toel.append(item, pnode)
        }
      }
      for (var j = 0; j < removes.length; j++) {
        $el.remove(removes[j])
        // this.$set(removes, key, value)
      }
      $el.setCheckedKeys([])
      this.onResult(this.checks)

      // this.$set(this.checks, 0, '123')
      // this.checks = checks
      // console.log(this.checks)
    }
  }
}
</script>

<style lang="scss" scope>
.transfer {
  &-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  &-panel {
    position: relative;
    flex-basis: 40%;
    min-height: 300px;
    max-height: 100%;
    height: 400px;
    padding-top: 40px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    vertical-align: middle;
    &__head {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 40px;
      line-height: 40px;
      background: #f5f7fa;
      margin: 0;
      padding-left: 15px;
      border-bottom: 1px solid #ebeef5;
      color: #000;
    }
  }
  &-actions {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    .el-button + .el-button {
      margin: 10px 0 0;
    }
  }
}
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}

.el-transfer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-transfer-panel {
  flex: 1;
  &__body {
    height: 400px;
  }
  &__list.is-filterable {
    height: 100%;
  }
  &__item {
    .el-checkbox__input {
      display: none;
    }
  }
}

.el-transfer-panel__item.el-checkbox {
  margin: 0;
  padding: 10px;
  height: auto;
  line-height: initial;
  width: 100%;

  &::after {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    border-bottom: 1px solid #f3f4f5;
    background: #f3f4f5;
    width: 100%;
    content: '';
  }
  .el-checkbox__label {
    line-height: initial;
    padding: 0;
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      h2 {
        font-size: 14px;
        margin: 0;
      }
      p {
        font-size: 12px;
        margin: 0;
        font-weight: 300;
        overflow: hidden;
        color: #ccc;
      }
      span {
        align-self: flex-start;
        font-size: 12px;
        font-weight: 300;
      }
    }
  }
  &.is-checked {
    background: #1890ff;
    .el-checkbox__label {
      color: #fff;
      p {
        color: rgba(255, 255, 255, 0.5);
      }
    }
  }
}
</style>
